<{extend name="Public:public" /}>

<{block name="title"}>生产环境部署<{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar deployment-guide">
<h1>生产环境部署</h1>
  
<h2> 
	<a href="#">Van: vue-cli 环境部署</a> 
</h2> 
<h3> 
	<a href="#">1. 安装</a> 
</h3> 
<p>1. 安装node.js LTS版本</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">cmd:</span><br><span class="line">&gt; <span class="string">node -v</span></span><br><span class="line"><span class="string">v10.13.0</span></span><br><span class="line">&gt; <span class="string">npm -v</span></span><br><span class="line"><span class="string">6.4.1</span></span><br></pre></td></tr></tbody></table></figure>


<p>2. 安装vue-cil 全局安装一次 cmd</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment"># 全局安装 vue-cli</span></span><br><span class="line">&gt; <span class="string">npm install --global vue-cli</span></span><br></pre></td></tr></tbody></table></figure>

<p>3. 创建一个基于 webpack 模板的 新项目</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment"># 切换到 需要安装的文件夹</span></span><br><span class="line">&gt; <span class="string">e:</span></span><br><span class="line">E:\&gt; <span class="string">cd 0_codeWork</span></span><br><span class="line">E:\0_codeWork&gt; <span class="string">vue init webpack 0_Myjoin</span><span class="comment">    # 0_Myjoin为需要创建的文件夹</span></span><br><span class="line">? Target directory exists. Continue? (Y/n) <span class="string">Y回车</span></span><br><span class="line">? Project name (0_Myjoin) <span class="string">myjoin回车</span></span><span class="comment">    # 项目文件名 必须小写</span><br><span class="line">? Project description <span class="string">myjoin taijiao回车</span></span><span class="comment">    # 项目描述</span><br><span class="line">? Author <span class="string">vanzyi <vanzyi@163.com>回车</span></span><span class="comment">    # 作者</span><br><span class="line">&gt; <span class="string">Runtime + Compiler回车</span></span><span class="comment">    # 编译方式 第1种 standalone</span><br><span class="line">?Install vue-router? <span class="string">Y</span></span><span class="comment">    # 安装 vue路由</span><br><span class="line">?Use ESLint to lint your code? <span class="string">Y</span></span><span class="comment">    # 代码 ESLint 检查规范</span><br><span class="line">?Pick an ESLint preset <span class="string">Standard</span></span><span class="comment">    # 代码 ESLint 检查规范</span><br><span class="line">?Set up unit tests <span class="string">n</span></span><span class="comment">    # 单元化测试</span><br><span class="line">?Setup e2e tests... <span class="string">n</span></span><span class="comment">    # 端到端测试</span><br><span class="line">?Should we run 'npm install'... <span class="string">Yes, use NPM</span></span><span class="comment">    # 包管理方式</span><br><span class="line"><span class="comment">下面自动安装...</span></span><br></pre></td></tr></tbody></table></figure>

<p>4. 运行服务器 cmd</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment"># 进入项目目录</span></span><br><span class="line">&gt; <span class="string">e:</span></span><br><span class="line">E:\&gt; <span class="string">cd 0_codeWork\0_Myjoin</span></span><br><span class="line">E:\0_codeWork\0_Myjoin&gt; <span class="string">npm run dev</span></span><br><span class="line"><span class="comment">下面自动打包...</span></span><br><span class="line"><span class="comment">Your application is running here: http://localhost:8080</span></span><br></pre></td></tr></tbody></table></figure>


<p>5. 终止服务器 cmd</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="string">ctr+c</span></span><br></pre></td></tr></tbody></table></figure>
<br/>
<br/>
<br/>



  
<h2 id="开启生产环境模式"> 
	<a href="#开启生产环境模式" class="headerlink" title="开启生产环境模式" data-scroll="">开启生产环境模式</a> 
</h2> 
<p>开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。</p>
<h3 id="不使用构建工具"> 
	<a href="#不使用构建工具" class="headerlink" title="不使用构建工具" data-scroll="">不使用构建工具</a> 
</h3> 
<p>如果用 Vue 完整独立版本，即直接用 <code>&lt;script&gt;</code> 元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (<code>vue.min.js</code>)。两种版本都可以在<a href="installation.html#直接用-lt-script-gt-引入">安装指导</a>中找到。</p>
<h3 id="使用构建工具"><a href="#使用构建工具" class="headerlink" title="使用构建工具" data-scroll="">使用构建工具</a></h3><p>当使用 webpack 或 Browserify 类似的构建工具时，Vue 源码会根据 <code>process.env.NODE_ENV</code> 决定是否启用生产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量，以启用 Vue 的生产环境模式，同时在构建过程中警告语句也会被压缩工具去除。这些所有 <code>vue-cli</code> 模板中都预先配置好了，但了解一下怎样配置会更好。</p>
<h4 id="webpack"><a href="#webpack" title="webpack"></a>webpack</h4><p>在 webpack 4+ 中，你可以使用 <code>mode</code> 选项：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line">  mode: <span class="string">'production'</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>但是在 webpack 3 及其更低版本中，你需要使用 <a href="https://webpack.js.org/plugins/define-plugin/" target="_blank" rel="noopener">DefinePlugin</a>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> webpack = <span class="built_in">require</span>(<span class="string">'webpack'</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    <span class="keyword">new</span> webpack.DefinePlugin({</span><br><span class="line">      <span class="string">'process.env.NODE_ENV'</span>: <span class="built_in">JSON</span>.stringify(<span class="string">'production'</span>)</span><br><span class="line">    })</span><br><span class="line">  ]</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<h4 id="Browserify"><a href="#Browserify" title="Browserify"></a>Browserify</h4><ul>
<li>在运行打包命令时将 <code>NODE_ENV</code> 设置为 <code>"production"</code>。这等于告诉 <code>vueify</code> 避免引入热重载和开发相关的代码。</li>
<li>对打包后的文件进行一次全局的 <a href="https://github.com/hughsk/envify" target="_blank" rel="noopener">envify</a> 转换。这使得压缩工具能清除掉 Vue 源码中所有用环境变量条件包裹起来的警告语句。例如：</li>
</ul>
<figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m &gt; build.js</span><br></pre></td></tr></tbody></table></figure>
<ul>
<li><p>或者在 Gulp 中使用 <a href="https://github.com/hughsk/envify" target="_blank" rel="noopener">envify</a>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 使用 envify 的自定义模块来定制环境变量</span></span><br><span class="line"><span class="keyword">var</span> envify = <span class="built_in">require</span>(<span class="string">'envify/custom'</span>)</span><br><span class="line"></span><br><span class="line">browserify(browserifyOptions)</span><br><span class="line">  .transform(vueify)</span><br><span class="line">  .transform(</span><br><span class="line">    <span class="comment">// 必填项，以处理 node_modules 里的文件</span></span><br><span class="line">    { <span class="attr">global</span>: <span class="literal">true</span> },</span><br><span class="line">    envify({ <span class="attr">NODE_ENV</span>: <span class="string">'production'</span> })</span><br><span class="line">  )</span><br><span class="line">  .bundle()</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p>或者配合 Grunt 和 <a href="https://github.com/jmreidy/grunt-browserify" target="_blank" rel="noopener">grunt-browserify</a> 使用 <a href="https://github.com/hughsk/envify" target="_blank" rel="noopener">envify</a>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">// 使用 envify 自定义模块指定环境变量</span></span><br><span class="line"><span class="keyword">var</span> envify = <span class="built_in">require</span>(<span class="string">'envify/custom'</span>)</span><br><span class="line"></span><br><span class="line">browserify: {</span><br><span class="line">  dist: {</span><br><span class="line">    options: {</span><br><span class="line"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="comment">// 该函数用来调整 grunt-browserify 的默认指令</span></span><br><span class="line"> &nbsp; &nbsp; &nbsp; &nbsp;configure: <span class="function"><span class="params">b</span> =&gt;</span> b</span><br><span class="line">        .transform(<span class="string">'vueify'</span>)</span><br><span class="line">        .transform(</span><br><span class="line"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="comment">// 用来处理 `node_modules` 文件</span></span><br><span class="line">          { <span class="attr">global</span>: <span class="literal">true</span> },</span><br><span class="line">          envify({ <span class="attr">NODE_ENV</span>: <span class="string">'production'</span> })</span><br><span class="line">        )</span><br><span class="line">        .bundle()</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<h4 id="Rollup"><a href="#Rollup" title="Rollup"></a>Rollup</h4><p>使用 <a href="https://github.com/rollup/rollup-plugin-replace" target="_blank" rel="noopener">rollup-plugin-replace</a>：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> replace = <span class="built_in">require</span>(<span class="string">'rollup-plugin-replace'</span>)</span><br><span class="line">rollup({</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  plugins: [</span><br><span class="line">    replace({</span><br><span class="line">      <span class="string">'process.env.NODE_ENV'</span>: <span class="built_in">JSON</span>.stringify( <span class="string">'production'</span> )</span><br><span class="line">    })</span><br><span class="line">  ]</span><br><span class="line">}).then(...)</span><br></pre></td></tr></tbody></table></figure>
<h2 id="模板预编译"><a href="#模板预编译" class="headerlink" title="模板预编译" data-scroll="">模板预编译</a></h2><p>当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。</p>
<p>预编译模板最简单的方式就是使用<a href="./single-file-components.html">单文件组件</a>——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。</p>
<p>如果你使用 webpack，并且喜欢分离 JavaScript 和模板文件，你可以使用 <a href="https://github.com/ktsn/vue-template-loader" target="_blank" rel="noopener">vue-template-loader</a>，它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。</p>
<h2 id="提取组件的-CSS"><a href="#提取组件的-CSS" class="headerlink" title="提取组件的 CSS" data-scroll="">提取组件的 CSS</a></h2><p>当使用单文件组件时，组件内的 CSS 会以 <code>&lt;style&gt;</code> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段“无样式内容闪烁 (fouc)”。将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。</p>
<p>查阅这个构建工具各自的文档来了解更多：</p>
<ul>
<li><a href="https://vue-loader.vuejs.org/zh-cn/configurations/extract-css.html" target="_blank" rel="noopener">webpack + vue-loader</a> (<code>vue-cli</code> 的 webpack 模板已经预先配置好)</li>
<li><a href="https://github.com/vuejs/vueify#css-extraction" target="_blank" rel="noopener">Browserify + vueify</a></li>
<li><a href="https://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=custom-handler" target="_blank" rel="noopener">Rollup + rollup-plugin-vue</a></li>
</ul>
<h2 id="跟踪运行时错误"><a href="#跟踪运行时错误" class="headerlink" title="跟踪运行时错误" data-scroll="">跟踪运行时错误</a></h2><p>如果在组件渲染时出现运行错误，错误将会被传递至全局 <code>Vue.config.errorHandler</code> 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 <a href="https://sentry.io" target="_blank" rel="noopener">Sentry</a>，它为 Vue 提供了<a href="https://sentry.io/for/vue/" target="_blank" rel="noopener">官方集成</a>。</p>

  
  
    <div class="guide-links">
      
      
        <span>← <a href="/v2/guide/filters.html">过滤器</a></span>
      
      
      
        <span style="float: right;"><a href="/v2/guide/single-file-components.html">单文件组件</a> →</span>
      
    </div>
  
  <div class="footer">
      <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/v2/guide/deployment.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
  </div>
</div>
<{/block}>
